<template>
  <div id="fireAlarmStatistics"></div>
</template>

<script>
import { _fireAlarmStatistics } from '../../http/api'
export default {
  components: {},
  data() {
    return {
      myChart: "",
    };
  },
  mounted() {
    // this.setEcharts();
    this.getList();
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioX = window.innerWidth / 370;
        var ratioY = window.innerHeight / 880;

        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
  methods: {
    // 绘制图表、
    setEcharts() {
      this.myChart = this.$echarts.init(
        document.getElementById("fireAlarmStatistics")
      );
      // 计划产值
      var zzx1 = [27, 38, 41, 21, 27];

      var barWidth = 40;
      let option = {
        tooltip: {
          // trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: "#000000",
          textStyle: {
            fontSize: 55, // 字体大小
            color: "#fff",
          },
          formatter: (e) => {
            // console.log(e);
            let str = e.name + '月 \n   ' + e.value + '次'
            return str
          }
        },
        grid: {
          top: "10%",
          left: "0%",
          bottom: "5%",
          right: "13%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          name: "单位：月",
          nameTextStyle: {
            color: "#fff",
            fontSize: 40,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: "Microsoft YaHei",
              color: "#fff", // x轴颜色
              fontWeight: "normal",
              fontSize: 38,
              // lineHeight: 22,
            },
            interval: 0, //标签设置为全部显示
            margin: 15,
            // lineHeight: 15,
          },
        },

        yAxis: {
          min: 0,
          max: 100,
          type: "value",
          name: "单位: 次",
          nameGap: 30,
          nameTextStyle: {
            color: "#fff",
            fontSize: 40,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(135,140,147,1)", //左侧显示线
              color: "#fff", //左侧显示线
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            // formatter: "{value}%",
            textStyle: {
              color: "#fff",
              fontSize: 40,
            },
          },
        },
        series: [
          //  底部正方形
          {
            type: "pictorialBar",
            symbol: "diamond",
            symbolSize: [barWidth, 8],
            symbolOffset: [0, 4],
            z: 12,
            color: "#3185FF",
            data: zzx1,
          },
          // 上部正方形
          {
            data: zzx1,
            type: "pictorialBar",
            symbol: "diamond",
            symbolSize: [barWidth, 8],
            symbolOffset: [0, -4],
            color: "#3185FF",
            z: 12,
            symbolPosition: "end",
          },

          // 底部柱子
          {
            data: zzx1,
            type: "bar",
            barWidth: barWidth,
            zlevel: -1,
            label: {
              normal: {
                show: true,
                position: "top",
                // "formatter": "{c}%"
                fontSize: 40,
                fontWeight: "700",
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                opacity: 0.7,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(84,161,252,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(84,161,252,.3)",
                  },
                ]),
                barBorderRadius: 0,
              },
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
    getList() {
      _fireAlarmStatistics().then(res => {
        // 时间轴
        let monthArr = Object.keys(res.data);
        monthArr = monthArr.sort((a, b) => {
          return a - b
        })


        console.log(monthArr);


        // value
        let value = Object.values(res.data);

        // console.log(value);

        let option = {
          xAxis: {
            data: monthArr
          },
          series: [
            {
              data: value
            },
            {
              data: value
            },
            {
              data: value
            }
          ]
        }
        this.myChart.setOption(option);

      }).catch(err => {
        console.log(err);
      })
    },
    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 188;
      var ratioY = window.innerHeight / 880;
      var ratioX = window.innerWidth / 370;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getalarmType();
      this.setEcharts();
    },
  },
};
</script>

<style scoped lang="less">
#fireAlarmStatistics {
  width: 1712px;
  height: 880px;
  padding: 50px 40px;

  box-sizing: border-box;
  // background: rgba(0, 0, 0, 0.6);
  // background: url(../../assets/方框底图.png) 0 0 no-repeat;
  // background-size:100% 100%;
}
</style>
